<template>
	<view>
		<view class="cf-container ns-border-color-gray">
			<view class="tab">
				<view @click="getType(0)"><text :class="type == 0 ? 'ns-text-color active' : ''">未使用</text></view>
				<view @click="getType(1)"><text :class="type == 1 ? 'ns-text-color active' : ''">已使用</text></view>
				<view @click="getType(-1)"><text :class="type == -1 ? 'ns-text-color active' : ''">已过期</text></view>
			</view>
		</view>
		<view class="list ns-padding ns-margin-top">
			<view class="shop-item" v-for="(item, index) in list" :key="index" :style="'background:url(' + item.background + ') 100% 100% no-repeat'" @click="goDetail(item)">
				<view class="detail">
					<view class="shop-info">
						<image class="ns-margin-right" :src="item.picture_info ? $util.img(item.picture_info) : ''" mode="aspectFit"></image>
						<view class="shop-title ns-font-size-lg">{{ item.goods_name }}</view>
					</view>
					<view class="ns-margin-left ns-margin-top ns-padding-left">有限期:{{ item.end_time }}</view>
				</view>
				<view class="num-wrap">
					<view class="ns-font-size-lg">可用次数</view>
					<view v-if="item.confine_use_number == 0">不限次数</view>
					<view v-else class="num uni-bold">{{ item.number }}</view>
				</view>
			</view>
		</view>
		<ns-login ref="login" href="verification_code"></ns-login>
		<!-- 数据为空 -->
		<view v-if="isEmpty" class="ns-text-color-gray empty">暂时没有虚拟码</view>
	</view>
</template>

<script>
import http from 'common/js/http.js';
import nsLogin from 'components/ns-login/ns-login.vue';
export default {
	components: {
		nsLogin
	},
	data() {
		return {
			type: 0,
			list: [],
			isEmpty: false
		};
	},
	onShow() {
		var isLogin = false;
		// #ifdef H5
		getApp().checkLogin(() => {
			isLogin = true;
			setTimeout(() => {
				this.$refs.login.clickLogin();
			}, 100);
		});
		// #endif
		// #ifdef MP
		getApp().$vm.checkLogin(() => {
			isLogin = true;
			this.$refs.login.clickLogin();
		});
		// #endif

		if (isLogin) return;

		this.getType(0);
	},
	onHide() {
		this.list = [];
		this.isEmpty = false;
	},
	mixins: [http],
	methods: {
		getType(type) {
			this.type = type;
			this.getList();
		},
		getList() {
			this.sendRequest({
				url: 'System.Order.virtualCodeList',
				data: {
					type: this.type
				},
				success: res => {
					if (res && res.data.length > 0) {
						let list = res.data;
						for (var i = 0; i < list.length; i++) {
							list[i].number = parseInt(list[i]['confine_use_number']) - parseInt(list[i]['use_number']);
							if (list[i].use_status == 0) {
								list[i].background =
									'';
							} else if (list[i].use_status == 1) {
								list[i].background =
									'';
							} else {
								list[i].background =
									'';
							}
						}
						this.list = list;
						this.isEmpty = false;
					} else {
						this.list = [];
						this.isEmpty = true;
					}
				}
			});
		},
		goDetail(item) {
			if (this.type == 0) {
				this.$util.redirectTo('/pages/verification/detail/detail', { vg_id: item.virtual_goods_id });
			}
		}
	}
};
</script>

<style lang="scss">
.cf-container {
	background: #fff;
	overflow: hidden;
	border-bottom: 2rpx solid;
	margin-bottom: 20rpx;
}
.active {
	border-bottom: 4rpx solid $base-color;
}

.tab {
	display: flex;
	justify-content: space-between;
}

.tab > view {
	text-align: center;
	width: 33%;
	text {
		display: inline-block;
		line-height: 88rpx;
	}
}

.empty {
	text-align: center;
}

.shop-item {
	display: flex;
	justify-content: space-between;
	padding: 28rpx;
	margin-bottom: $ns-margin;
	height: 156rpx;
	border-radius: 20rpx;
	view {
		color: #ffffff;
	}
	.detail {
		width: 65vw;
		.shop-info {
			display: flex;
			image {
				width: 90rpx;
				height: 90rpx;
				border-radius: 100%;
			}
			.shop-title {
				width: 65vw;
				height: 90rpx;
				overflow: hidden;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				word-break: break-all;
				line-height: 1.5;
			}
		}
	}
	.num-wrap {
		padding: $ns-padding 0;
	}
}
.num {
	text-align: center;
	font-size: 40rpx;
}
</style>
